{extend name="public/base" /}
{block name="style"}
<style>
    /* 推广码卡片样式 */
    .promo-card {
        background: linear-gradient(135deg, #1AAD19, #36B37E);
        border-radius: 10px;
        padding: 15px;
        margin: 10px;
        color: white;
        position: relative;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    }

    .promo-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        opacity: 0.3;
    }

    .promo-title {
        text-align: center;
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 15px;
        position: relative;
        z-index: 1;
    }

    .qrcode-container {
        background-color: white;
        width: 180px;
        height: 180px;
        margin: 0 auto 15px;
        padding: 10px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        z-index: 1;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    /* 统计数据区域 */
    .stats-card {
        background-color: white;
        border-radius: 10px;
        padding: 15px;
        margin: 10px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    }

    .stats-title {
        font-size: 15px;
        color: #333;
        font-weight: 600;
        margin-bottom: 12px;
        padding-left: 5px;
    }

    .stats-container {
        display: flex;
        justify-content: space-around;
    }

    .stat-item {
        text-align: center;
        flex: 1;
        padding: 0 5px;
    }

    .stat-value {
        font-size: 18px;
        font-weight: 600;
        color: #1AAD19;
        margin-bottom: 3px;
    }

    .stat-label {
        font-size: 12px;
        color: #888;
    }

    /* 代理等级数据 - 可点击样式 */
    .agent-levels {
        margin-top: 15px;
    }

    .agent-level {
        display: flex;
        padding: 10px 0;
        border-bottom: 1px solid #f5f5f5;
        text-decoration: none; /* 去除链接下划线 */
        color: inherit; /* 继承父元素颜色 */
        cursor: pointer; /* 鼠标悬停显示指针 */
        transition: background-color 0.2s; /* 点击背景色过渡 */
    }

    .agent-level:hover, .agent-level:active {
        background-color: #f9f9f9; /* 点击/悬停背景色变化 */
    }

    .agent-level:last-child {
        border-bottom: none;
    }

    .agent-level-name {
        flex: 2;
        font-size: 14px;
        color: #333;
        font-weight: 500;
        display: flex;
        align-items: center;
    }

    .agent-level-name i {
        margin-right: 8px;
        color: #1AAD19;
    }

    .agent-level-data {
        flex: 3;
        display: flex;
        justify-content: space-around;
    }

    .agent-data-item {
        text-align: center;
    }

    .agent-data-value {
        font-size: 14px;
        font-weight: 600;
        color: #333;
        margin-bottom: 2px;
    }

    .agent-data-label {
        font-size: 11px;
        color: #888;
    }

    /* 右侧箭头指示可点击 */
    .agent-level-arrow {
        margin-left: 5px;
        color: #ccc;
        font-size: 15px;
        display: flex;
        align-items: center;
    }

    /* 操作按钮区域 - 重点优化对齐 */
    .action-buttons {
        padding: 0 10px 15px;
        gap: 10px;
        /* 确保容器宽度正确，避免按钮被挤压 */
        width: 100%;
    }



    /* 推广说明 */
    .instruction-card {
        background-color: white;
        border-radius: 10px;
        padding: 15px;
        margin: 10px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    }

    .instruction-title {
        font-size: 15px;
        color: #333;
        font-weight: 600;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
    }

    .instruction-title i {
        color: #1AAD19;
        margin-right: 8px;
        font-size: 16px;
    }

    .instruction-list {
        padding-left: 24px;
    }

    .instruction-list li {
        font-size: 13px;
        color: #666;
        margin-bottom: 8px;
        line-height: 1.5;
    }
</style>
{/block}
{block name="content"}
<!-- 头部导航（与其他页面统一） -->
<div class="header">
    <a href="javascript:void(0);" class="back-btn">
        <i class="fa fa-angle-left" style="font-size: 24px;"></i>
    </a>
    <h1 class="header-title">我的推广码</h1>
</div>
<div class='weui-content'>
    <!-- 推广码卡片 -->
    <div class="promo-card">
        <div class="promo-title">我的专属推广码</div>
        <div class="qrcode-container">

          <img src="/static/index/images/tuiguang/{$uid}.png"  style="width: 100%;height: 100%;"/>

        </div>
    </div>

    <!-- 统计数据 -->
    <div class="stats-card">
        <div class="stats-title">推广数据总览</div>
        <div class="stats-container">
            <div class="stat-item">
                <div class="stat-value">{$totalNum}</div>
                <div class="stat-label">总邀请人数</div>
            </div>
            <div class="stat-item">
                <div class="stat-value">usdt{$totalAsset}</div>
                <div class="stat-label">总充值</div>
            </div>
            <div class="stat-item">
                <div class="stat-value">usdt{$commisions}</div>
                <div class="stat-label">总佣金</div>
            </div>
        </div>

        <!-- 代理等级数据（可点击） -->
        <div class="agent-levels">
            <div class="stats-title" style="margin-bottom: 8px;">代理等级数据</div>

            <!-- 一级代理（可点击） -->
            <a href="/agent-list.html" class="agent-level">
                <div class="agent-level-name">
                    <i class="fa fa-user-circle"></i>一级代理
                </div>
                <div class="agent-level-data">
                    <div class="agent-data-item">
                        <div class="agent-data-value">{$firstTotal}人</div>
                        <div class="agent-data-label">人数</div>
                    </div>
                    <div class="agent-data-item">
                        <div class="agent-data-value">usdt{$firstLevelAsset}</div>
                        <div class="agent-data-label">充值金额</div>
                    </div>
                </div>
                <div class="agent-level-arrow">
                    <i class="fa fa-chevron-right"></i>
                </div>
            </a>

            <!-- 二级代理（可点击） -->
            <a href="/agent-list.html?level=2" class="agent-level">
                <div class="agent-level-name">
                    <i class="fa fa-user-circle-o"></i>二级代理
                </div>
                <div class="agent-level-data">
                    <div class="agent-data-item">
                        <div class="agent-data-value">{$secondTotal}人</div>
                        <div class="agent-data-label">人数</div>
                    </div>
                    <div class="agent-data-item">
                        <div class="agent-data-value">usdt{$secondLevelAsset}</div>
                        <div class="agent-data-label">充值金额</div>
                    </div>
                </div>
                <div class="agent-level-arrow">
                    <i class="fa fa-chevron-right"></i>
                </div>
            </a>

            <!-- 三级代理（可点击） -->
            <a href="/agent-list.html?level=3" class="agent-level">
                <div class="agent-level-name">
                    <i class="fa fa-user-o"></i>三级代理
                </div>
                <div class="agent-level-data">
                    <div class="agent-data-item">
                        <div class="agent-data-value">{$thirdTotal}人</div>
                        <div class="agent-data-label">人数</div>
                    </div>
                    <div class="agent-data-item">
                        <div class="agent-data-value">usdt{$thirdLevelAsset}</div>
                        <div class="agent-data-label">充值金额</div>
                    </div>
                </div>
                <div class="agent-level-arrow">
                    <i class="fa fa-chevron-right"></i>
                </div>
            </a>
        </div>
    </div>

    <!-- 操作按钮 -->
    <div class="action-buttons">
        <a href="/static/index/images/tuiguang/{$uid}.png" class="weui-btn weui-btn_default" id="saveBtn">
            <i class="fa fa-download"></i>下载图片
        </a>
        <a href="javascript:;" class="weui-btn weui-btn_primary" id="copyLinkBtn" data-url="{$url}">
            <i class="fa fa-link"></i>复制链接地址
        </a>
    </div>

    <!-- 推广说明 -->
    <div class="instruction-card">
        <div class="instruction-title">
            <i class="fa fa-info-circle"></i>推广说明
        </div>
        <ul class="instruction-list">
            <li>一级代理：直接邀请的用户；充值返利{:config("global.FIRST_REBATE")}%</li>
            <li>二级代理：邀请的用户；充值返利{:config("global.SECOND_REBATE")}%</li>
            <li>三级代理：邀请的用户；充值返利{:config("global.THIRD_REBATE")}%</li>
        </ul>
    </div>
</div>


{/block}
{block name="script"}
<script>
    $("#copyLinkBtn").click(function (){
        const url = $(this).data("url")
        const textarea = document.createElement('textarea');
        textarea.value = url;
        document.body.appendChild(textarea);
        textarea.select();
        document.execCommand('copy');
        document.body.removeChild(textarea)
        $.toast('地址已经复制', 'success');
    });
</script>
{/block}
